<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开班信息查询</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <!-- 添加Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    <!-- 导航栏 -->
    <header>
        <div class="header-container" style="width: 1000px;">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fa fa-car text-white text-xl"></i>
                </div>
                <span class="logo-text">驾校学员交流区</span>
            </div>
            <nav>
                <ul class="nav-links">
                    <a href="/zrz/daohanglanLayui" class="text-dark hover:text-primary nav-link-hover font-medium">首页</a>&nbsp;&nbsp;&nbsp;
                     <!-- <a href="/zrz/guanliyuanXXLayui" class="text-dark hover:text-primary nav-link-hover font-medium">管理员</a>-->
                    <a href="/ljk/coach/index" class="text-dark hover:text-primary nav-link-hover font-medium">教练团队</a>&nbsp;&nbsp;&nbsp;
                    <a href="/hzj/jiaxiaoguanliList" class="text-dark hover:text-primary nav-link-hover font-medium">基本信息</a>&nbsp;&nbsp;&nbsp;
                    <a href="/kaiban/page" class="text-dark hover:text-primary nav-link-hover font-medium">开班信息</a>&nbsp;&nbsp;&nbsp;
                    <a href="/zjy/liuyan" class="text-dark hover:text-primary nav-link-hover font-medium">用户留言</a>&nbsp;&nbsp;&nbsp;
                    <a href="/zjy/zixun" class="text-dark hover:text-primary nav-link-hover font-medium">用户咨询</a>
                </ul>
            </nav>
            <a href="#" class="contact-button hidden md:block">联系客服</a>
        </div>
    </header>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .nav-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            }
            .nav-link-hover {
                @apply relative overflow-hidden;
            }
            .nav-link-hover::after {
                content: '';
                @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
            }
            .nav-link-hover:hover::after {
                @apply w-full;
            }
            .hero-gradient {
                background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .form-shadow {
                box-shadow: 0 10px 25px rgba(64, 158, 255, 0.1);
            }
            .layui-form-label {
                @apply text-gray-700 font-medium;
            }
            .layui-input:focus, .layui-textarea:focus {
                @apply border-primary ring-2 ring-primary/20;
            }
            .layui-btn-primary {
                @apply border-primary text-primary hover:bg-primary/5;
            }
            .layui-btn-normal {
                @apply bg-primary hover:bg-primary/90;
            }
        }
    </style>
    
    <style>
        /* 导航栏样式开始 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: #409EFF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }

        .logo-text {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }

        .nav-links {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            text-decoration: none;
            color: #34495e;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        /* 导航栏样式结束 */
        
        /* 优化的蓝色主题样式 */
        :root {
            --primary-blue: #007bff;
            --light-blue: #e7f1ff;
            --dark-blue: #0056b3;
            --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }
        
        body {
            background-color: #ffffff;
            color: #212529;
        }
        
        /* 导航栏优化 */
        .navbar {
            box-shadow: var(--shadow-md);
            background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
        }
        
        /* 卡片优化 */
        .card {
            border: none;
            box-shadow: var(--shadow-sm);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .card-header {
            background: linear-gradient(to right, var(--primary-blue), #0069d9);
            color: white;
            font-weight: 500;
            border-bottom: none;
        }
        
        /* 按钮优化 */
        .btn-primary {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
            transition: all 0.2s;
        }
        .btn-primary:hover {
            background-color: var(--dark-blue);
            border-color: var(--dark-blue);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }
        .btn-primary:active {
            transform: translateY(0);
        }
        .btn-success {
            background-color: #28a745;
            border-color: #28a745;
            transition: all 0.2s;
        }
        .btn-success:hover {
            background-color: #218838;
            border-color: #1e7e34;
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }
        
        /* 表格优化 */
        .table {
            border-collapse: separate;
            border-spacing: 0;
        }
        .table thead {
            background: linear-gradient(to right, var(--primary-blue), #0069d9);
            color: white;
            position: sticky;
            top: 0;
        }
        .table th {
            border: none;
            padding: 1rem;
        }
        .table td {
            padding: 0.75rem 1rem;
            border-top: 1px solid #dee2e6;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: var(--light-blue);
        }
        .table-hover tbody tr:hover {
            background-color: rgba(0, 123, 255, 0.15);
        }
        
        /* 模态框优化 */
        .modal-header {
            background: linear-gradient(to right, var(--primary-blue), #0069d9);
            color: white;
            border-bottom: none;
        }
        .modal-content {
            border: none;
            box-shadow: var(--shadow-md);
        }
        
        /* 分页优化 */
        .page-link {
            color: var(--primary-blue);
        }
        .page-item.active .page-link {
            background-color: var(--primary-blue);
            border-color: var(--primary-blue);
        }

        /* 表单输入优化 */
        .form-control, .form-select {
            border: 1px solid #ced4da;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-blue);
            box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
        }
        
        /* 筛选区域优化 */
        .card.bg-light {
            background-color: #f8f9fa !important;
            border-left: 4px solid var(--primary-blue);
        }
        
        /* 页面标题优化 */
        h2.text-center {
            color: var(--dark-blue);
            position: relative;
            padding-bottom: 0.5rem;
        }
        h2.text-center:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-blue), #0069d9);
            border-radius: 3px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body class="bg-gray-50 font-sans" style="padding-top: 80px;">
<div class="container mt-4">
    <h2 class="text-center mb-4">开班信息查询</h2>
    
    <!-- 筛选、搜索和添加区域 -->
    <div class="row mb-3">
        <div class="col-md-12">
            <div class="card mb-3">
                <div class="card-header bg-light">
                    <h5 class="mb-0">筛选条件</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">课程名称</label>
                            <input type="text" id="filterCourseName" class="form-control" placeholder="输入课程名称">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">教练</label>
                            <input type="text" id="filterCoach" class="form-control" placeholder="输入教练姓名">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">地点</label>
                            <input type="text" id="filterLocation" class="form-control" placeholder="输入地点">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">状态</label>
                            <select id="filterStatus" class="form-select">
                                <option value="">全部</option>
                                <option value="available">可报名</option>
                                <option value="full">已满</option>
                                <option value="closed">已关闭</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button class="btn btn-primary me-2" onclick="filterCourses()">筛选</button>
                            <button class="btn btn-outline-secondary" onclick="resetFilters()">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    
    <!-- 课程列表表格 -->
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>课程名称</th>
                <th>教练</th>
                <th>地点</th>
                <th>开始时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="courseTableBody">
            <!-- 动态加载数据 -->
        </tbody>
    </table>
    
    <!-- 分页控件 -->
    <div class="row mt-3">
        <div class="col-md-6">
            <span id="pageInfo">第1页，共1页</span>
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation" class="float-end">
                <ul class="pagination" id="pagination">
                    <li class="page-item disabled" id="prevPage">
                        <a class="page-link" href="#" tabindex="-1">上一页</a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item disabled" id="nextPage">
                        <a class="page-link" href="#">下一页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    
    <!-- 添加课程模态框 -->
    <div class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加新课程</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body"></div>
                    <form id="addForm">
                        <div class="mb-3">
                            <label class="form-label">课程名称</label>
                            <input type="text" class="form-control" name="courseName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">教练</label>
                            <input type="text" class="form-control" name="coach" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">地点</label>
                            <input type="text" class="form-control" name="location" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">开始时间</label>
                            <input type="date" class="form-control" name="startTime" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">结束时间</label>
                            <input type="date" class="form-control" name="endTime" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" name="status" required>
                                <option value="available">可报名</option>
                                <option value="full">已满</option>
                                <option value="closed">已关闭</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">容量</label>
                            <input type="number" class="form-control" name="capacity" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">价格</label>
                            <input type="number" step="0.01" class="form-control" name="price" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">描述</label>
                            <textarea class="form-control" name="description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="addCourse()">保存</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 编辑课程模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑课程</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" name="id">
                        <!-- 其他字段与添加表单相同 -->
                        <div class="mb-3">
                            <label class="form-label">课程名称</label>
                            <input type="text" class="form-control" name="courseName" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">教练</label>
                            <input type="text" class="form-control" name="coach" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">地点</label>
                            <input type="text" class="form-control" name="location" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">开始时间</label>
                            <input type="date" class="form-control" name="startTime" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">结束时间</label>
                            <input type="date" class="form-control" name="endTime" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">状态</label>
                            <select class="form-select" name="status" required>
                                <option value="available">可报名</option>
                                <option value="full">已满</option>
                                <option value="closed">已关闭</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">容量</label>
                            <input type="number" class="form-control" name="capacity" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">价格</label>
                            <input type="number" step="0.01" class="form-control" name="price" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">描述</label>
                            <textarea class="form-control" name="description" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="updateCourse()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 分页相关变量
    let currentPage = 1;
    const pageSize = 10;
    let totalPages = 1;
    let currentFilters = {};

    // 页面加载时获取课程列表
    $(document).ready(function() {
        loadCourses();
    });

    // 加载课程列表
    function loadCourses(page = 1) {
        currentPage = page;
        showLoading();
        $.get('/kaiban/list', {
            page: currentPage,
            size: pageSize
        }, function(response) {
            renderCourses(response.data);
            updatePagination(response.total, response.page, response.pages);
        }).fail(function() {
            alert('加载课程列表失败');
        }).always(function() {
            hideLoading();
        });
    }

    // 显示加载状态
    function showLoading() {
        $('#courseTableBody').html('<tr><td colspan="7" class="text-center">加载中...</td></tr>');
    }

    // 隐藏加载状态
    function hideLoading() {
        // 由renderCourses处理
    }

    // 渲染课程列表
    function renderCourses(courses) {
        const tbody = $('#courseTableBody');
        tbody.empty();
        
        courses.forEach(course => {
            const row = `
                <tr>
                    <td>${course.id}</td>
                    <td>${course.courseName}</td>
                    <td>${course.coach}</td>
                    <td>${course.location}</td>
                    <td>${new Date(course.startTime).toLocaleDateString()}</td>
                    <td>${getStatusText(course.status)}</td>
                    <td>
                        <button class="btn btn-sm btn-danger" onclick="deleteCourse(${course.id})">删除</button>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }

    // 获取状态文本
    function getStatusText(status) {
        const statusMap = {
            'available': '可报名',
            'full': '已满',
            'closed': '已关闭'
        };
        return statusMap[status] || status;
    }

    // 筛选课程
    function filterCourses(page = 1) {
        currentPage = page;
        currentFilters = {
            courseName: $('#filterCourseName').val(),
            coach: $('#filterCoach').val(),
            location: $('#filterLocation').val(),
            status: $('#filterStatus').val()
        };
        
        showLoading();
        $.get('/kaiban/search', {
            ...currentFilters,
            page: currentPage,
            size: pageSize
        }, function(response) {
            renderCourses(response.data);
            updatePagination(response.total, response.page, response.pages);
        }).fail(function() {
            alert('筛选失败');
        }).always(function() {
            hideLoading();
        });
    }

    // 更新分页控件
    function updatePagination(total, page, pages) {
        totalPages = pages;
        $('#pageInfo').text(`第${page}页，共${pages}页，共${total}条记录`);
        
        // 更新分页按钮状态
        $('#prevPage').toggleClass('disabled', page <= 1);
        $('#nextPage').toggleClass('disabled', page >= pages);
        
        // 更新页码
        const $pagination = $('#pagination');
        $pagination.find('li:not(#prevPage):not(#nextPage)').remove();
        
        // 添加页码按钮
        const startPage = Math.max(1, page - 2);
        const endPage = Math.min(pages, page + 2);
        
        for (let i = startPage; i <= endPage; i++) {
            const $li = $(`<li class="page-item ${i === page ? 'active' : ''}"></li>`);
            const $a = $('<a class="page-link" href="#"></a>').text(i);
            $a.on('click', function(e) {
                e.preventDefault();
                if (Object.keys(currentFilters).length > 0) {
                    filterCourses(i);
                } else {
                    loadCourses(i);
                }
            });
            $li.append($a);
            $('#nextPage').before($li);
        }
    }

    // 上一页事件
    $('#prevPage a').on('click', function(e) {
        e.preventDefault();
        if (currentPage > 1) {
            if (Object.keys(currentFilters).length > 0) {
                filterCourses(currentPage - 1);
            } else {
                loadCourses(currentPage - 1);
            }
        }
    });

    // 下一页事件
    $('#nextPage a').on('click', function(e) {
        e.preventDefault();
        if (currentPage < totalPages) {
            if (Object.keys(currentFilters).length > 0) {
                filterCourses(currentPage + 1);
            } else {
                loadCourses(currentPage + 1);
            }
        }
    });

    // 重置筛选
    function resetFilters() {
        $('#filterCourseName').val('');
        $('#filterCoach').val('');
        $('#filterLocation').val('');
        $('#filterStatus').val('');
        loadCourses();
    }


    // 添加课程
    function addCourse() {
        const formData = $('#addForm').serialize();
        $.post('/kaiban/add', formData, function(response) {
            if (response.code === 200) {
                $('#addModal').modal('hide');
                loadCourses();
            } else {
                alert('添加失败: ' + response.msg);
            }
        });
    }

    // 编辑课程
    function editCourse(id) {
        $.get('/kaiban/get/' + id, function(response) {
            if (response.code === 200) {
                const course = response.data;
                const form = $('#editForm');
                form.find('[name="id"]').val(course.id);
                form.find('[name="courseName"]').val(course.courseName);
                form.find('[name="coach"]').val(course.coach);
                form.find('[name="location"]').val(course.location);
                form.find('[name="startTime"]').val(formatDate(course.startTime));
                form.find('[name="endTime"]').val(formatDate(course.endTime));
                form.find('[name="status"]').val(course.status);
                form.find('[name="capacity"]').val(course.capacity);
                form.find('[name="price"]').val(course.price);
                form.find('[name="description"]').val(course.description);
                
                $('#editModal').modal('show');
            } else {
                alert('获取课程信息失败');
            }
        });
    }

    // 更新课程
    function updateCourse() {
        const formData = $('#editForm').serialize();
        $.ajax({
            url: '/kaiban/update',
            type: 'POST',
            data: formData,
            success: function(response) {
                if (response.code === 200) {
                    $('#editModal').modal('hide');
                    loadCourses();
                } else {
                    alert('更新失败: ' + response.msg);
                }
            }
        });
    }

    // 删除课程
    function deleteCourse(id) {
        if (confirm('确定要删除这个课程吗?')) {
            $.ajax({
                url: '/kaiban/delete/' + id,
                type: 'DELETE',
                success: function(response) {
                    if (response.code === 200) {
                        loadCourses();
                    } else {
                        alert('删除失败: ' + response.msg);
                    }
                }
            });
        }
    }

    // 格式化日期
    function formatDate(dateStr) {
        const date = new Date(dateStr);
        return date.toISOString().split('T')[0];
    }
</script>
</body>
</html>